<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<title>店铺 首页</title>
		<link rel="stylesheet" href="css/shopIndex.css" />
		<link rel="stylesheet" href="font/font-awesome-4.7.0/css/font-awesome.min.css" />
	</head>
	<body>
		<div class="web">
		<header>
			<div class="arrow">
				<i class="fa fa-angle-left"></i>
			</div>	
			<span class="spread-btn">推广</span>
			<p>Infoscape</p>
		</header>
		<section>
			<div class="banner" id="topGoal">
				<div class="background">
					<img src="img/shopIndex_img/banner.jpg" alt="banner" />
				</div>
				<div class="sign">
					<div class="imgwrap">
						<a href="shopManage.html">
							<img src="img/mange_img/manage_01.png" alt="sign" />
						</a>
					</div>
					<p>Infoscape</p>
				</div>
			</div>
			<nav class="clearfix">
				<p>Infoscape</p>
				<div class="function clearfix">
					<div class="left">
						<span><img src="img/shopIndex_img/search.png" alt="" /></span>
						<span><a href="../product_manage/search.html">搜索</a></span>
					</div>
					<div class="right">
						<span><img src="img/shopIndex_img/shop.png" alt="" /></span>
						<span>购物车</span>
					</div>
				</div>
			</nav>
			<ul class="ticket">
				<li>
					<a href="">
						<img src="img/shopIndex_img/shopManage_02.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="">
						<img src="img/shopIndex_img/shopManage_02.jpg" alt="" />
					</a>
				</li>
				<li>
					<a href="">
						<img src="img/shopIndex_img/shopManage_02.jpg" alt="" />
					</a>
				</li>
			</ul>
			<div class="product product-first">
				<p>韩国泡面农心辛拉面120g*5袋辛辣香菇牛肉速食汤面韩国进口方便面</p>
				<p>农心辛拉面汤浓味，香辣辛爽不油腻，清爽零负担，不去韩国也能吃到美味的韩式泡面</p>
				<ul class="clearfix">
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_03.jpg" alt="" />
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_04.jpg" alt="" />
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_05.jpg" alt="" />
						</a>
					</li>
				</ul>
				<div class="priceAndBuying">
					<h6>&yen;&nbsp;99.00</h6>
					<div class="buy-btn">
						<img src="img/shopIndex_img/shop_01.png" alt="" />
					</div>
				</div>
			</div>
			<div class="product">
				<p>韩国泡面农心辛拉面120g*5袋辛辣香菇牛肉速食汤面韩国进口方便面</p>
				<p>农心辛拉面汤浓味，香辣辛爽不油腻，清爽零负担，不去韩国也能吃到美味的韩式泡面</p>
				<ul class="clearfix">
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_03.jpg" alt="" />
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_04.jpg" alt="" />
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_05.jpg" alt="" />
						</a>
					</li>
				</ul>
				<div class="priceAndBuying">
					<h6>&yen;&nbsp;99.00</h6>
					<div class="buy-btn">
						<img src="img/shopIndex_img/shop_01.png" alt="" />
					</div>
				</div>
			</div>
			<div class="product">
				<p>韩国泡面农心辛拉面120g*5袋辛辣香菇牛肉速食汤面韩国进口方便面</p>
				<p>农心辛拉面汤浓味，香辣辛爽不油腻，清爽零负担，不去韩国也能吃到美味的韩式泡面</p>
				<ul class="clearfix">
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_03.jpg" alt="" />
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_04.jpg" alt="" />
						</a>
					</li>
					<li>
						<a href="">
							<img src="img/shopIndex_img/shopManage_05.jpg" alt="" />
						</a>
					</li>
				</ul>
				<div class="priceAndBuying clearfix">
					<h6>&yen;&nbsp;99.00</h6>
					<div class="buy-btn">
						<img src="img/shopIndex_img/shop_01.png" alt="" />
					</div>
				</div>
			</div>
		</section>
		<footer>
			<div class="foot-nav">
				<span>小店首页</span>
				<span>购物记录</span>
			</div>
			<div class="foot-logo">
				<img src="img/shopIndex_img/shopManage_06.png" alt="" />
			</div>
		</footer>
		<div class="mask">
			<div class="cart">
				<div class="desc-wrap">
					<div class="product-desc">
						<div class="left">
							<img src="img/shopIndex_img/shopManage_07.jpg" alt="" />
						</div>
						<div class="right">
							<p>韩国泡面农心辛拉面120g*5袋辛辣香菇牛肉速食...</p>
							<h6>&yen;&nbsp;99.00</h6>
							<p>商品编号: 1950235214</p>
						</div>
					</div>
				</div>
				<div class="size">
					<div class="row">
						<h6>规格</h6>
						<p>三养辣火鸡炒面120g*6袋组合</p>
					</div>
					<div class="row">
						<h6></h6>
						<p>鲜甜海鲜炒面</p>
					</div>
					<div class="row">
						<h6></h6>
						<p>猪骨浓汤口感炒面</p>
					</div>
					<div class="row">
						<h6></h6>
						<p>三养辣火鸡炒面120g*6袋组合</p>
					</div>
					<div class="row">
						<h6>数量</h6>
						<p><span>-</span><input type="number" placeholder="1"/><span>+</span></p>
					</div>
				</div>
				<ul class="select-btn">
					<li>立刻购买</li>
					<li>加入购物车</li>
				</ul>				
			</div>
		</div>
		<div class="success-prompt">
			<img src="img/shopIndex_img/shopMannage_08.png" alt="" />
		</div>
		<div class="spread-prompt-wrap">
				<div class="white-wrap">
					<ul class="spread-prompt">
					<li>
						<a href="http://weixin.qq.com/">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon1.png" alt="" />
							</div>
							<h6>微信好友</h6>
						</a>
					</li>
					<li>
						<a href="https://baike.baidu.com/item/%E5%BE%AE%E4%BF%A1%E6%9C%8B%E5%8F%8B%E5%9C%88/1823073?fr=aladdin">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon2.png" alt="" />
							</div>
							<h6>微信朋友圈</h6>
						</a>
					</li>
					<li>
						<a href="http://weibo.com/">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon3.png" alt="" />
							</div>
							<h6>新浪微博</h6>
						</a>
					</li>
					<li>
						<a href="https://baike.baidu.com/item/QQ%E5%A5%BD%E5%8F%8B/5453259?fr=aladdin">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon4.png"" alt="" />
							</div>
							<h6>QQ好友</h6>
						</a>
					</li>
					<li>
						<a href="">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon5.png" alt="" />
							</div>
							<h6>QQ空间</h6>
						</a>
					</li>
					<li>
						<a href="">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon6.png" alt="" />
							</div>
							<h6>手机联系人</h6>
						</a>
					</li>
					<li>
						<a href="">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon7.png" alt="" />
							</div>
							<h6>老客户</h6>
						</a>
					</li>
					<li>
						<a href="">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon8.png" alt="" />
							</div>
							<h6>二维码</h6>
						</a>
					</li>
					<li>
						<a href="">
							<div class="imgwrap">
								<img src="img/shopIndex_img/icon9.png" alt="" />
							</div>
							<h6>复制链接</h6>
						</a>
					</li>
				</ul>
				<div class="spread-cancel">取消</div>
				</div>
			</div>
			<div class="sale-prompt">
				<div class="inner">
					<div class="top">
						<p>100元</p>
						<p>订单满300元使用（不含运费）</p>
						<p>使用期限2016.02.28-2016.11.28</p>
					</div>
					<div class="bottom">
						<span>取消</span>
						<span>领取</span>
					</div>
				</div>
			</div>
			<div class="to-top-btn">
				<a href="#topGoal">
					<img src="img/shopIndex_img/toTop.png" alt="" />
				</a>
			</div>
		</div>
		<script src="js/mobileFontSizeReset.js"></script>
		<script>
			//加入购物车
			var mask = document.querySelector('.mask');
			var cart = document.querySelector('.cart');
			var cartBtn = document.querySelector('nav .right');
			console.log(cartBtn);
			cartBtn.addEventListener('click', function () {				
				mask.style.display = 'block';
				setTimeout( function () {
					cart.className = 'cart animation-translate';
				},10);

			});
			//加入购物成功
			var addToTheCart = document.querySelector('.select-btn>li:last-of-type');
			var successPrompt = document.querySelector('.success-prompt');
			console.log(addToTheCart);
			addToTheCart.addEventListener('click', function () {
				cart.className = 'cart';
				setTimeout( function () {
						mask.style.display = 'none';
				},1010);
				
				setTimeout( function () {
						successPrompt.style.display = 'block';
				},1800);
				
				setTimeout( function () {
						successPrompt.style.display = 'none';
				},3300);
			} );
			
			//推广
			var spreadBlack = document.querySelector('.spread-prompt-wrap');
			var spreandWhite = spreadBlack.querySelector('.white-wrap');
			var sWCancelBtn = spreandWhite.querySelector('.spread-cancel');
			var spreadBtn = document.querySelector('.spread-btn');
			
			spreadBtn.addEventListener('click', function () {
				spreadBlack.style.display = 'block';
				setTimeout(function () {
					spreandWhite.className = 'white-wrap white-animation';
				},130);
			});
			
			sWCancelBtn.addEventListener('click', function () {
				spreandWhite.className = 'white-wrap close-white-animation';
				setTimeout(function () {
					spreadBlack.style.display = 'none';	
				},300);
			} );
			
			//领券
			var ticketPromptBtn = document.querySelector('.sale-prompt span:first-child');
			var ticket = document.querySelector('.sale-prompt');
			ticketPromptBtn.addEventListener('click', function () {
					ticket.style.display = 'none';
			});
			var ticketContainer = document.querySelector('.ticket');
			var tickets = ticketContainer.querySelectorAll('li');
			for ( var i = 0; i < tickets.length; i++ ) {
				tickets[i].addEventListener('click', function (e) {
					e.preventDefault();
					ticket.style.display = 'block';
				});
			}
			
			var topBtn = document.querySelector('.to-top-btn a');
			var section = document.querySelector('section');
			topBtn.addEventListener('click', function () {
				topBtn.parentNode.style.display = 'none';
			});
			section.addEventListener('scroll', function () {			
				topBtn.parentNode.style.display = 'block';	
			});
			
			
		</script>
	</body>
</html>
